<template>
  <!-- 放置一个图标 -->
  <div @click="fullClickFn">
    <svg-icon :icon-class="isScrrenIn ? 'exit-fullscreen' : 'fullscreen'" class="fullscreen" />
  </div>
</template>

<script>
// screenfull@5.2.0
// 内部的原理: html标签对象.requestFullscreen()
// 但是为何我们不直接自己写, 而是要使用screenfull这个包
// 因为此方法在不同的浏览器名字不同的, 所以screenfull这个包, 把所有的方法自己会做匹配使用
import screenfull from 'screenfull'

export default {
  name: 'ScreenFull',
  data() {
    return {
      isScrrenIn: false // 不全屏为false,全屏为true
    }
  },
  created() {
    // 自己监听用户按下的按键
    // 全屏下监听不到键盘事件(重要)
    // document.addEventListener('fullscreenchange', (ev) => {
    //   console.dir(document.fullscreen)
    // })
    // 上面是下面的原生写法
    screenfull.on('change', () => {
      this.isScrrenIn = screenfull.isFullscreen
    })
  },
  methods: {
    // 全屏图标点击事件
    fullClickFn() {
      // 判断是否支持: 如果可用,就可以全屏
      if (!screenfull.isEnabled) {
        // 此时全屏不可用
        this.$message.warning('此时全屏组件不可用')
        return
      }
      // document.documentElement.requestFullscreen()  原生js调用
      // 内部自己判断和决定效果
      // 当前是全屏, 退出
      // 当前不是全屏, 进入
      screenfull.toggle()
      this.isScrrenIn = !this.isScrrenIn
    }
  }
}
</script>

   <style lang="scss" scoped>
.fullscreen {
  width: 20px;
  height: 20px;
  color: #fff;
  cursor: pointer;
}
</style>
